<template>
  <view style="width: 100%;height: 100%;">
    <view class="root">
      <view class="content">
        <uni-forms ref="formRef" :model="form" validateTrigger="blur" label-position="top" label-width="100%"
          err-show-type="toast">
          <view class="content-wrapper">
            <view class="content-inner-wrapper">
              <uni-forms-item label="物品名称:" name="wasteName" required key="wasteName">
                <view class="form-content-item" :class="form.wasteName ?  '' : 'input-item'">
                  <uni-easyinput type="text" maxlength="30" v-model="form.wasteName" :inputBorder="false"
                    placeholder="请填写" :clearable="true" />
                </view>
              </uni-forms-item>
              <uni-forms-item label="物品数量:" name="wasteNumber" required key="wasteNumber">
                <view class="form-content-item" :class="form.wasteNumber ?  '' : 'input-item'">
                  <uni-easyinput type="number" v-model="form.wasteNumber" :inputBorder="false" placeholder="请填写"
                    :clearable="true" />
                </view>
              </uni-forms-item>
              <uni-forms-item label="上门时间:" name="homeVisitTime" required key="homeVisitTime">
                <view class="form-content-item" :class="form.homeVisitTime ?  '' : 'input-item'">
                  <uni-datetime-picker v-model="form.homeVisitTime" type="datetime" :hide-second="true"
                    @change="handleTimeChange" :end="getEndOfTodayTimestamp()">
                    <uni-easyinput type="text" v-model="form.homeVisitTime" :inputBorder="false" placeholder="请选择"
                      :clearable="true" disabled />
                  </uni-datetime-picker>
                </view>
              </uni-forms-item>
              <uni-forms-item label="物品图片: (可上传1-3张物品照片)" name="pathList" required style="margin-bottom: 0;">
                <u-upload :fileList="form.pathList" @afterRead="(info) => afterReadFive(info, 'form', 19)"
                  @delete="(info) => deletePhoto(info, 'form')" name="pathList" :maxCount="3" :multiple="true"
                  width="96" height="80">
                  <image :src="baseImgUrl + 'upload-icon3.png'" style="width: 200rpx; height: 160rpx"></image>
                </u-upload>
              </uni-forms-item>
              <uni-forms-item label="情况说明:" name="wasteMemo" key="wasteMemo">
                <view class="form-content-item" :class="form.wasteMemo ?  '' : 'input-item'">
                  <uni-easyinput type="textarea" :maxlength="100" v-model="form.wasteMemo" :inputBorder="false"
                    placeholder="请填写" :clearable="true" />
                </view>
              </uni-forms-item>
            </view>
          </view>
        </uni-forms>
      </view>
      <view class="bottom">
        <yy-button-submit @submit="onSubmit"></yy-button-submit>
      </view>
    </view>
  </view>
</template>

<script>
  import _ from '@/utils/lodash.js'
  import uploadFileMixin from '../../utils/upload-file-mixin'
  import {
    Toast,
    generateUrlOptions,
    getOptionsParams,
    idCardRule,
    isLoading,
    navBack,
    phoneRule,
    getEndOfTodayTimestamp
  } from '../../utils/util'
  import {
    addWasteRecyclingRecordDetails
  } from '../../api/api'

  import moment from '@/utils/moment'
  export default {
    mixins: [uploadFileMixin],
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        routerParams: {},
        formRef: null,
        form: this.initForm(),
        routerParams: {},
        rules: {
          wasteName: {
            rules: [{
              required: true,
              errorMessage: "请填写物品名称！",
            }]
          },
          wasteNumber: {
            rules: [{
              required: true,
              errorMessage: "请填写物品数量！",
            }]
          },
          homeVisitTime: {
            rules: [{
              required: true,
              errorMessage: "请选择上门时间！",
            }]
          },
          pathList: {
            rules: [{
              required: true,
              errorMessage: "请上传物品图片！",
            }]
          },
          wasteMemo: {
            rules: [{
              required: false,
              errorMessage: "请填写情况说明！",
            }]
          },
        }
      }
    },
    onLoad(options) {
      this.routerParams = getOptionsParams(options)
    },
    onReady() {
      this.$refs.formRef.setRules(this.rules)
    },
    methods: {
      getEndOfTodayTimestamp,
      initForm() {
        return {
          wasteName: '',
          wasteNumber: '',
          homeVisitTime: '',
          wasteMemo: '',
          // 当物信息
          pathList: []
        }
      },
      onload(options) {
        this.routerParams = getOptionsParams(options)
      },
      onSubmit() {
        this.$refs.formRef.validate().then(() => {
            let data = {
              companyMessageId: this.routerParams.companyMessageId,
              ...this.form,
              homeVisitTime: moment(this.form.homeVisitTime).format('YYYY/MM/DD HH:mm:ss'),
            };

            // 处理图片信息
            if (data.pathList) {
              data.pathList = data.pathList.map(item => {
                return item.halfPath
              })
            }
            isLoading(true)
            addWasteRecyclingRecordDetails(data).then((res) => {
                if (res.code == 200) {
                  setTimeout(() => {
                    navBack();
                  }, 100)
                  uni.$emit('junk-list-add')
                }
                Toast(res.message);
              })
              .finally(() => {
                isLoading(false)
              })
          })
          .catch(() => {})
      },
      handleTimeChange(value) {
        console.log(value)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../styles/uni-form-label-top.scss';

  .root {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    background: #F9F9F9;

    .content {
      flex: 1;
      height: 0;
      overflow: auto;

      .content-wrapper {
        background: #FFFFFF;
        box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(207, 207, 207, 0.1608);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        padding: 40rpx 20rpx;
        margin-bottom: 10rpx;
      }
    }
  }
</style>